<div class="profileView">

    <div class="profile">
        <div class="profile_pic">
            <img ng-src="{{ showBigArtwork (profile_data.avatar_url) }}" alt="{{ profile_data.username }}" class="songList_item_artwork">
        </div>
        <div class="profile_box">
            <button ng-hide="isLoggedInUser" ng-click="changeFollowing()" ng-mouseover="hoverIn()" ng-mouseleave="setFollowButtonText()" ng-class="{active: isFollowing}" class="button follow_button">{{follow_button_text}}</button>
            <h1 class="selectable-text">{{profile_data.username}}</h1>
            <h3>Followers: {{followers_count}}</h3>
            <p class="profile_description selectable-text" text-collapse text-max-height="205" text-to-collapse="{{profile_data.description}}"></p>
        </div>
    </div>

    <!-- Song list wrapper -->
    <div class="favoritesView_inner">
        <h2>Tracks:</h2><br>

        <ul class="songList"
            infinite-scroll='loadMore()'
            infinite-scroll-distance='0'
            infinite-scroll-container='".mainView"'
            infinite-scroll-immediate-check='false' >

            <li class="songList_item" ng-repeat="data in data track by $index"
                ng-if="data.kind == 'track' && data.streamable" >

                <tracks data="data"/>

            </li>
        </ul>
    </div>
    <!-- Song list wrapper / end -->

    <div ng-include="'views/common/loading.html'"></div>

</div>